<template>
    <el-form :model="empForm" :inline="true" style="margin-bottom: 10px;" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="empForm.name" style="width: 120px;" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="empForm.gender" style="width: 100px;" placeholder="请选择">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="账号">
            <el-input v-model="empForm.account" style="width: 120px;" placeholder="请输入员工账号"></el-input>
        </el-form-item>
        <el-form-item label="考勤状态">
            <el-select v-model="empForm.empAttendanceStatus" style="width: 150px;" placeholder="请选择">
                <el-option label="迟到" value="1"></el-option>
                <el-option label="缺勤" value="2"></el-option>
                <el-option label="请假" value="3"></el-option>
                <el-option label="考勤成功" value="4"></el-option>
                <el-option label="未考勤" value="5"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="考勤日期">
            <el-date-picker v-model="empForm.data" value-format="YYYY-MM-DD" style="width: 150px;" type="date"
                placeholder="请选择日期" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getAttendance">查询</el-button>
            <el-button type="info" @click="clearAll">清空</el-button>
        </el-form-item>
    </el-form>
    <div style="justify-content: space-between;">
        <el-button type="primary" @click="dialogVisible = true">新增考勤日期</el-button>
        <el-button type="danger" @click="deductSalary(null)">批量扣除工资</el-button>
        <el-button type="danger" @click="deleteByIds(null)">批量删除</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%;margin-bottom: 10px;margin-top: 10px;"
        @selection-change="getSelectMessage">
        <el-table-column type="selection" width="40" style="width: 50px;" />
        <el-table-column type="index" label="id" width="50" />
        <el-table-column property="name" label="员工姓名" width="85" />
        <el-table-column property="gender" label="员工性别" width="85">
            <template #default="scope">
                <span v-if="scope.row.gender == 1">男</span>
                <span v-else>女</span>
            </template>
        </el-table-column>
        <el-table-column align="center" property="account" label="员工账号" width="90" />
        <el-table-column align="center" property="deductSalary" label="已扣工资" width="85" />
        <el-table-column align="center" property="attendanceName" label="考勤名称" width="120"/>
        <el-table-column align="center" property="attendanceDate" label="考勤日期" width="115" />
        <el-table-column align="center" property="endAttendanceTime" label="考勤截止时间" width="170">
            <template #default="scope">
                <span>{{ moment(scope.row.endAttendanceTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" property="empAttendanceTime" label="用户考勤时间" width="170">
            <template #default="scope">
                <span v-if="scope.row.empAttendanceTime">{{ moment(scope.row.empAttendanceTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
                <span v-else></span>
            </template>
        </el-table-column>
        <el-table-column align="center" property="empAttendanceStatus" label="考勤状态" width="105">
            <template #default="scope">
                <span style="width: 10px;" v-if="scope.row.empAttendanceStatus == 1">迟到</span>
                <span style="width: 10px;" v-else-if="scope.row.empAttendanceStatus == 2">缺勤</span>
                <span style="width: 10px;" v-else-if="scope.row.empAttendanceStatus == 3">请假</span>
                <span style="width: 10px;" v-else-if="scope.row.empAttendanceStatus == 4">考勤成功</span>
                <span style="width: 10px;" v-else>未考勤</span>
            </template>
        </el-table-column>
        <el-table-column style="justify-content: space-between;" align="center" label="操作" width="128">
            <template #default="scope">
                <el-link style="margin-right:10px ;" target="_blank" @click="deductSalary(scope.row.id)">扣除工资</el-link>
                <el-link type="danger" @click="deleteByIds(scope.row.id)">删除</el-link>
            </template>
        </el-table-column>
    </el-table>
    <div>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 考勤时间对话框 -->
    <el-dialog v-model="dialogVisible" title="新增考勤时间" width="500" draggable>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="attendanceForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="考勤名称" prop="attendanceName">
                <el-input v-model="attendanceForm.attendanceName" style="width: 220px;" placeholder="请输入考勤名称"
                    clearable />
            </el-form-item>
            <el-form-item label="考勤日期" prop="attendanceDate">
                <el-date-picker v-model="attendanceForm.attendanceDate" type="date" placeholder="请选择考勤时间"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable />
            </el-form-item>
            <el-form-item label="考勤截止日期" prop="endAttendanceTime">
                <el-date-picker v-model="attendanceForm.endAttendanceTime" type="datetime" placeholder="请选择考勤截止时间"
                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="addAttendance">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 扣除工资对话框 -->
    <el-dialog v-model="dialogVisible_subtract" title="扣除工资" width="500" draggable>
        <el-form :model="deductForm">
            <el-form-item label="扣除金额">
                <el-input style="width: 150px;" v-model="deductForm.moneyNumber" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="deduct">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, reactive, onMounted, nextTick } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from '@/utils/request';
import moment from 'moment';
const size = ref<ComponentSize>('default')
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const currentPage = ref(1)
const pageSize = ref(10)
const disabled = ref(false)
const dialogVisible = ref(false)
const dialogVisible_subtract = ref(false)
const background = ref(true)
const deductForm = ref(
    {
        moneyNumber: 0
    }
)
const total = ref(0)
let empForm = ref({
    name: '',
    gender: '',
    account: '',
    status: '',
    data: '',
    empAttendanceStatus: '',
})
const clearAll = () => {
    empForm.value = {
        name: '',
        gender: '',
        account: '',
        status: '',
        data: '',
        empAttendanceStatus: '',
    }
    //清空之后查全表
    getAttendance()
}
const attendanceForm = ref({
    attendanceName: '',
    attendanceDate: '',
    endAttendanceTime: ''
})
const tableData = ref([])
const rules = ref<FormRules>({
    attendanceName: [
        { required: true, message: '请输入考勤名称', trigger: 'blur' }
    ],
    attendanceDate: [
        { required: true, message: '请选择考勤日期', trigger: 'change' }
    ],
    endAttendanceTime: [
        { required: true, message: '请选择考勤截止日期', trigger: 'change' }
    ]
})
//获取复选框选中的数据
const selectedMessage = ref([])
//获取所有选中的id
const selectedId = ref([])

const getSelectMessage = (val: []) => {
    selectedMessage.value = val
}

//当前页展示大小发生改变
const handleSizeChange = (val: number) => {
    pageSize.value = val
    //每次改变都要发送请求根据页数获取数据
    getAttendance()
}
//当前页数发生改变
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    //每次改变都要发送请求根据页数获取数据
    getAttendance()
}

//给所有员工添加考勤日期(汇总成一张表)
//发送get请求
const addAttendance = async () => {
    //判断选择的日期是否小于当前日期
    //获取当前日期
    const currentDate = new Date();
    //获取选择的日期
    let selectedDate = new Date(attendanceForm.value.attendanceDate);
    //获取选择的结束时间
    let endAttendanceTime = new Date(attendanceForm.value.endAttendanceTime);
    //判断选择的日期是否小于当前日期
    if (selectedDate < currentDate && endAttendanceTime < currentDate) {
        ElMessage.error('选择的日期不能小于当前日期');
        return;
    }
    try {
        const result = await axios.get(`/admin/attendance?attendanceName=${attendanceForm.value.attendanceName}&attendanceDate=${attendanceForm.value.attendanceDate}&endAttendanceTime=${attendanceForm.value.endAttendanceTime}`);
        // 根据后端返回的数据中的code字段值来判断添加考勤信息的操作是否成功
        if (result.data.code === 1) {
            // 如果code值为1，表示后端成功处理了添加考勤信息的请求，此时向用户展示成功提示信息
            ElMessage.success('考勤日期添加成功');
            //关闭对话框
            dialogVisible.value = false;
            // 重新获取员工考勤信息
            getAttendance();
        } else {
            // 如果code值不为1，意味着添加考勤信息的操作失败了，提示用户检查输入信息的格式是否正确
            ElMessage.error('考勤日期添加失败，请检查格式是否正确');
        }
    } catch (error) {
        ElMessage.error('添加考勤信息请求出错，请检查网络或联系后台管理员');
        // 同时，将详细的错误信息打印到控制台，方便开发人员后续排查问题，确定具体的出错原因
        console.error('添加考勤信息出错:', error);
    }
};
onMounted(() => {
    getAttendance()
})
//获取所有员工的考勤信息 (get请求)
const getAttendance = async () => {
    try {
        const result = await axios.get(`/admin/attendances?page=${currentPage.value}&pageSize=${pageSize.value}
         &name=${empForm.value.name}&gender=${empForm.value.gender}&account=${empForm.value.account}
         &empAttendanceStatus=${empForm.value.empAttendanceStatus}&attendanceDate=${empForm.value.data}`)
        // 前端接收到响应后，会将响应数据中的员工考勤信息存储在tableData中，供前端展示使用
        if (result.data.code === 1) {
            tableData.value = result.data.data.rows;
            total.value = result.data.data.total;
        } else {
            ElMessage.error('获取考勤信息失败')
        }
    } catch (error) {
        // 如果在发送请求的过程中出现网络异常、后端接口无响应或者其他运行时错误等情况，都会被这个catch块捕获
        // 先向用户展示一个通用的错误提示信息，告知用户获取考勤信息的请求出现了问题
        ElMessage.error('获取考勤信息请求出错，请检查网络或联系后台管理员');
        // 同时，将详细的错误信息打印到控制台，方便开发人员后续排查问题，确定具体的出错原因
        console.error('获取考勤信息出错:', error);
    }
}
// 根据id删除员工考勤信息，支持多选删除（通过复选框选中多个）和单选删除（点击单个删除按钮）
const deleteByIds = async (id: number) => {
    // 弹出确认框，让用户确认是否真的要执行删除操作，防止误触删除按钮导致数据误删
    const isDelete = window.confirm('确定要删除吗？');
    if (!isDelete) {
        // 如果用户点击了取消（即不确认删除），则直接返回，不执行后续的删除逻辑
        return;
    }
    // 判断是否有通过复选框选中的员工考勤信息（用于多选删除的情况）
    if (selectedMessage.value.length > 0) {
        selectedId.value = selectedMessage.value.map(row => row.id);
    }
    else if (selectedMessage.value.length === 0 && id === null) {
        ElMessage.error('请选择要删除的员工考勤信息');
        return;
    } else {
        // 如果既不是多选删除的情况（selectedMessage.value.length为0），又传入了具体的id值（非null），说明是单选删除的情况
        // 将传入的单个id值包装成一个只包含这一个元素的数组，赋值给selectedId.value，以便后续统一处理删除请求
        selectedId.value = [id];
    }
    // 发送delete请求到指定的后端接口，尝试删除员工考勤信息
    try {
        // 使用axios库发送DELETE请求，请求的URL是根据本地服务地址（localhost:9000）以及具体的接口路径（Attendance/后面跟上要删除的员工考勤信息id，多个id用逗号隔开）拼接而成
        const result = await axios.delete('/admin/attendance/' + selectedId.value.join(','));
        if (result.data.code === 1) {
            // 如果后端返回的响应数据中的code属性值为1，表示删除操作成功
            // 弹出成功提示消息告知用户删除成功，并调用getAttendance函数（推测是用于重新获取最新的员工考勤信息列表，以更新页面显示）
            ElMessage.success('删除成功');
            getAttendance();
        } else {
            // 如果后端返回的响应数据中的code属性值不为1，说明删除操作失败
            // 弹出错误提示消息告知用户删除失败
            ElMessage.error('删除失败');
        }
    } catch (error) {
        // 如果在发送DELETE请求过程中出现了异常（比如网络问题、后端接口不存在等情况），在这里捕获异常并可以进行相应的错误处理，目前代码中暂时没有具体的处理逻辑，可以根据实际需求添加，例如打印错误日志等
        console.error('删除员工考勤信息时出现错误：', error);
    }
};
///批量扣除工资操作 获取id
const deductSalary = async (id: number) => {
    // 弹出确认框，让用户确认是否真的要执行删除操作，防止误触删除按钮导致数据误删
    const isDelete = window.confirm('确定要扣除工资吗？');
    if (!isDelete) {
        // 如果用户点击了取消（即不确认删除），则直接返回，不执行后续的删除逻辑
        return;
    }
    //判断是单选还是多选
    if (selectedMessage.value.length > 0) {
        // 多选
        selectedId.value = selectedMessage.value.map(row => row.id);
    } else if (selectedMessage.value.length === 0 && id === null) {
        //什么都没选
        ElMessage.error('请选择要扣除工资的员工考勤信息');
        return;
    } else {
        // 单选
        selectedId.value = [id];
    }
    //显示对话框
    dialogVisible_subtract.value = true;
}
/// 根据id进行扣除操作
const deduct = async (moneyNumber: number) => {
    //判断moneyNumber是否为空
    if (moneyNumber === null) {
        // 弹出错误消息
        ElMessage.error('请输入扣除金额');
        return;
    }
    try {
        // 发送PUT请求到后端API，更新员工考勤信息中的工资扣除字段
        const result = await axios.put('/admin/attendance', { ids: selectedId.value.join(','), money: deductForm.value.moneyNumber });
        // 检查后端返回的响应数据中的code字段是否为1，表示操作成功
        if (result.data.code === 1) {
            // 显示成功消息
            ElMessage.success('扣除成功');
            // 关闭扣除工资对话框
            dialogVisible_subtract.value = false;
            // 重新获取考勤信息，更新表格数据
            getAttendance();
        } else {
            // 显示错误消息
            ElMessage.error('扣除失败');
        }
    } catch (error) {
        // 捕获并处理请求过程中的错误
        console.error('扣除工资时发生错误:', error);
        // 显示错误消息
        ElMessage.error('扣除工资时发生错误，请检查网络或联系后台管理员');
    }
};

</script>

<style></style>